<template>
  <div>
    <el-button type="warning" class="btn-back" @click="back">
      <i class="icon-undo2"></i>
      上一页</el-button
    >
    <el-row :gutter="20">
      <el-col :span="6">
        <babyAvatar :child="child"></babyAvatar>
      </el-col>
      <el-col :span="18">
        <baseInfo :child="child"></baseInfo>
      </el-col>
    </el-row>
    <el-row style="margin-top:15px;">
      <detailForm
        v-show="pageStack[pageStack.length - 1] === 0"
        :id="id"
        :child="child"
        @next="next"
        @detailNext="detailNext"
      ></detailForm>
      <diseaseNextDetail
        v-show="pageStack[pageStack.length - 1] === 1"
        :id="id"
        :key="diseaseNextDetailKey"
        :disease_id="disease_id"
        :temperature="temperature"
        @next="next"
      ></diseaseNextDetail>
    </el-row>
  </div>
</template>
<script>
import _ from 'lodash';
import babyAvatar from '@/components/common/babyAvatar/babyAvatar';
import baseInfo from './baseInfo';
import detailForm from './detailForm';
import diseaseNextDetail from './diseaseNextDetail';

export default {
  components: {
    babyAvatar,
    baseInfo,
    detailForm,
    diseaseNextDetail
  },
  props: {
    id: {},
    isResetPageStack: {type: Boolean, default: false}
  },
  data() {
    return {
      diseaseNextDetailKey: 0,
      pageStack: [0],
      child: {},
      disease_id: '',
      temperature: {
        data: '',
        status: 1
      }
    };
  },
  watch: {
    id: {
      handler() {
        if (this.id) {
          this.getHeader();
        }
      },
      immediate: true
    },
    isResetPageStack() {
      if (this.isResetPageStack) {
        this.pageStack = [0];
        this.$emit('update:isResetPageStack', false);
      }
    }
  },
  methods: {
    getHeader() {
      this.$http
        .post(this.$url.childBaseInfo, {
          u_id: this.id
        })
        .then(res => {
          res.avatar =
            res.sex === '男'
              ? 'https://img.bingovip.shop/1570156689639.jpg'
              : 'https://img.bingovip.shop/1570156673539.jpg';
          this.child = res;
        })
        .catch(this.$catch);
    },
    next(data, index, ls) {
      this.$emit('next', data, index, ls);
    },
    detailNext(data) {
      this.disease_id = data.disease_id;
      this.temperature = data.temperature;
      this.diseaseNextDetailKey = _.uniqueId();
      this.pageStack.push(1);
    },
    back() {
      if (this.pageStack.length === 1) {
        this.$emit('back');
        return;
      }
      this.pageStack.pop();
    }
  }
};
</script>

<style lang="scss">
.btn-back {
  position: absolute;
  top: -68px;
  right: 30px;
  font-size: 16px;
  border-radius: 25px;
  padding: 7px 12px;
}
</style>
